/* 标签选项 */
<template>
	<view
		:style="{
			'height': show ? '200px' : '0'
		}"
		class="memes"
		:class="{
			'fixed': fixed
		}"
		@click.native.stop
	>
		<view class="meme-list">
			<view
				class="item"
				v-for="item in memes[selectMemeIndex].value"
				:key="item"
				@click="$emit('input', item)"
			>
				{{item}}
			</view>
		</view>
		<view class="meme-type">
			<view
				class="item"
				:class="index === selectMemeIndex ? 'active' : ''"
				v-for="(item,index) in memes"
				:key="item.name"
				@click="selectMemeIndex=index"
			>
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
import memes from '@/static/meme'

export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    fixed: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      memes,
      selectMemeIndex: 0,
    }
  }
}
</script>

<style lang="scss" scoped>
.memes {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #ffffff;

  &.fixed {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .meme-list {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    padding: 5px;
    overflow: auto;

    .item {
      width: 12.5%;
      margin-bottom: 10px;
      font-size: 38rpx;
      text-align: center;
    }
  }

  .meme-type {
    display: flex;
    padding: 2px 8px;
    font-size: 40rpx;
    border-top: $border1;

    .item {
      padding: 4px 6px;

      &.active {
        background-color: rgba($color: #000000, $alpha: 0.1);
        border-radius: $radiusMiddle;
      }
    }
  }
}
</style>
